<template>
    <AntdShowModal :title="`【${user.userName}-${user.nickName}】角色管理`" :width="900" ref="modalRef">
        <el-row :gutter="20">
            <!--部门数据-->
            <el-col :span="6" :xs="24">
                <DeptTree @confirm="deptConfirm"></DeptTree>
            </el-col>
            <el-col :span="18" :xs="24">
                
                <!-- 表格数据 -->
                <el-table v-loading="loading" :data="tableData">
                    <el-table-column label="角色编号" prop="id" width="100" align="center" />
                    <el-table-column label="角色标识" prop="roleKey" :show-overflow-tooltip="true" width="100" />
                    <el-table-column label="角色名称" prop="roleName" :show-overflow-tooltip="true" />
                    <el-table-column label="操作" align="center" width="150" class-name="small-padding fixed-width">
                        <template #default="scope">
                            <el-button type="danger" @click="doCancel(scope.row.id)"
                                v-if="hasRole(scope.row.roleKey)">取消授权</el-button>
                            <el-button type="primary" @click="doGrant(scope.row.id)" v-else>授权</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <EleZh>
                    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
                        v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
                </EleZh>

            </el-col>
        </el-row>
    </AntdShowModal>
</template>
<script setup>
import Validator from '@/utils/Validator';
import DeptTree from '@/module/org/components/DeptTree';
import {  SyncOutlined } from '@ant-design/icons-vue';
import { queryList } from '@/module/org/api/role';
import { queryRoles } from '@/module/org/api/user';
import { createOne, cancelOne } from '@/module/org/api/grant';
import useApp from '@/hooks'
const { $ } = useApp()
const modalRef = ref(null)
const userId = ref(null)
const user = ref({})
const queryParams = ref({
    deptId: undefined,
    pageNum: 1,
    pageSize: 10,
    status: 1
})
const tableData = ref([])
const loading = ref(false)
const total = ref(0)
const roleKeys = ref([])
// 计算函数
function hasRole(roleKey) {
    return roleKeys.value.includes(roleKey)
}
//
function doCancel(roleId) {
    cancelOne({
        roleId: roleId,
        userId: userId.value
    }).then(res => {
        $.showToast({
            title: '取消成功',
            icon: 'success'
        })
        getRoles()

    })
}
// 授权
function doGrant(roleId) {
    createOne({
        roleId,
        userId: userId.value
    }).then(res => {
        $.showToast({
            title: '授权成功',
            icon: 'success'
        })
        getRoles()

    })
}
// 获取用户角色列表
function getRoles() {
    queryRoles(userId.value).then(res => {
        let arr = res;
        roleKeys.value = arr.map(ele => {
            return ele.roleKey
        })
        console.log(roleKeys.value)
    })
}
// 参数重置
function resetQuery(){
    queryParams.value = {
        pageSize:10,
        pageNum:1
    }
}
// 查询
function handleQuery() {
    loading.value = true;
    queryList(queryParams.value).then(response => {
        tableData.value = response.content;
        total.value = response.totalElements;
        loading.value = false;
    })
}
// 部门确认
function deptConfirm(e) {
    queryParams.value.deptId = e
    queryParams.value.pageNum = 1
    handleQuery()
}
$.on('user-role-grant', data => {
    resetQuery();
    user.value = data;
    userId.value = data.id;
    // 初始化执行
    handleQuery()
    getRoles()
    modalRef.value.openModal();
})

</script>